<template>
	<wsPage title="优惠券管理">
		<div slot="page_operate">
			<Button type="ghost" @click="goBack"><Icon type="ios-arrow-back"></Icon><span>返回</span></Button>
		</div>

		<wsPanel>
			<template slot="panel_head_title">添加优惠券</template>
			<div slot="panel_body" class="ws-form-div">
				<div class="ws-form-div-form">
					<Form ref="form1" :model="form1.model" :rules="form1.rules" :label-width="150">
						<FormItem label="优惠券名称" prop="name">
							<Input v-model="form1.model.name" autofocus></Input>
		        		</FormItem>
		        		<FormItem label="总发行量" prop="quantity">
							<InputNumber :min="1" :max="10000" :precision="0" v-model="form1.model.quantity" style="width:200px"></InputNumber>
		        		</FormItem>
		        		<FormItem label="面额" prop="couponAmount">
							<InputNumber :min="1" :precision="2" v-model="form1.model.couponAmount" style="width:200px;border-bottom-right-radius: 0!important;border-top-right-radius: 0!important;"></InputNumber>
							<div class="ivu-input-group-append" style="display: initial;margin-left: -4px;padding: 8px 10px 8px 10px;"><span>元</span></div>
							<span>(面值只能是数值，0.01-10000，限2位小数)</span>
		        		</FormItem>
		        		<FormItem label="每人限领">
							<span>1张</span>
		        		</FormItem>
		        		<FormItem label="使用门槛" prop="useCondition">
							<RadioGroup v-model="form1.model.useCondition">
						        <Radio label="1">无限制</Radio>
						        <Radio label="2">满</Radio>
						    </RadioGroup>
						    <InputNumber :min="1" :precision="0" v-model="value1"></InputNumber>
						    <span>元可用</span>
		        		</FormItem>
		        		<FormItem label="有效期" prop="expiredType">
							<RadioGroup v-model="form1.model.expiredType" vertical>
						        <div style="display: inline-flex;padding-bottom: 10px;">
							        <Radio label="1">
							        	<span>日期范围</span>
							        </Radio>
							        <DatePicker type="daterange" placement="top" placeholder="请选择日期"  style="width: 200px"></DatePicker>
						        </div>
						        <div style="display: inline-flex">
							        <Radio label="2">
							        	<span>固定天数</span>
							        </Radio>
							        <InputNumber :min="1" :precision="0" v-model="value1" style="width:170px;border-bottom-right-radius: 0!important;border-top-right-radius: 0!important;"></InputNumber>
									<div class="ivu-input-group-append" style="padding: 8px 15px;"><span style="margin-left: -7px;">天</span></div>
						        	<span>(领取后到期天数)</span>
					        	</div>
						    </RadioGroup>
		        		</FormItem>
		        		<FormItem label="可使用商品" prop="userange">
							<RadioGroup v-model="form1.model.userange">
						        <Radio label="1">全场通用</Radio>
						        <Radio label="2">指定分类</Radio>
						        <Radio label="3">指定商品</Radio>
						    </RadioGroup>
		        		</FormItem>
		        		<FormItem label="添加分类" required v-show="form1.model.userange == 2">
							<div class="append-div">
								<Cascader :data="fields.categorys" v-model="fields.model.categoryIds" style="width: 100%;"></Cascader>
							</div>	
							<div class="ivu-input-group-append" style="display: initial;margin-left: -4px;padding: 8px 10px 8px 10px;cursor: pointer;">
								<Icon type="plus" size="16"></Icon>
							</div>
							<span style="padding-top: 10px;display: inline-flex;">购买以下分类商品可使用优惠券抵扣金额  已选中130个分类</span>
							<Table :columns="fields.columns" :data="fields.datas" border></Table>
		        		</FormItem>
		        		<FormItem label="添加商品" required v-show="form1.model.userange == 3">
							
		        		</FormItem>
		        		<FormItem>
							<Button type="primary" @click="saveForm">保存</Button>
							<Button @click="cancelForm">取消</Button>
						</FormItem>
				     </Form>  		
				</div>
			</div>
		</wsPanel>
	</wsPage>
</template>

<script>	
	import Util from '../../../common/util.js'
	import Common from '../../../common/common.js';
	export default {
		data() {
			return {
				form1: {
					model: {
						name: '', //优惠券名称
						quantity: 0, //发行量
						couponAmount: 1, //面值
						useCondition: 1, //1.无限制 2.满减
						expiredType: 1, //1.固定时间段 2.领取后多少天
						userange: 1, //1.店铺通用 2.商品基础类目 3.商品
					},
					rules: {
						name:[{ required: true, message: '请输入优惠券名称', trigger: 'blur' }, 
							{ max: 64, min: 3, message: '优惠券名称在3-64位', trigger: 'blur' }],
						quantity: [{ required: true, message: '请输入总发行量' }]	,
						couponAmount: [{ required: true, message: '请输入总发行量'}],
						useCondition: [{ required: true, message: '请选择使用门槛'}],
						expiredType: [{ required: true, message: '请选择有效期' }],
						userange: [{ required: true, message: '请选择可使用商品' }]
					}
				},
				fields: {
					model: {
						categoryIds: []
					},
					categorys: [{
	                    value: 'beijing',
	                    label: '北京',
	                    children: [
	                        {
	                            value: 'gugong',
	                            label: '故宫'
	                        },
	                        {
	                            value: 'tiantan',
	                            label: '天坛'
	                        },
	                        {
	                            value: 'wangfujing',
	                            label: '王府井'
	                        }
	                    ]
	                }, {
	                    value: 'jiangsu',
	                    label: '江苏',
	                    children: [
	                        {
	                            value: 'nanjing',
	                            label: '南京',
	                            children: [
	                                {
	                                    value: 'fuzimiao',
	                                    label: '夫子庙',
	                                }
	                            ]
	                        },
	                        {
	                            value: 'suzhou',
	                            label: '苏州',
	                            children: [
	                                {
	                                    value: 'zhuozhengyuan',
	                                    label: '拙政园',
	                                },
	                                {
	                                    value: 'shizilin',
	                                    label: '狮子林',
	                                }
	                            ]
	                        }
	                    ],
	                }],
	                columns: [{
	                	title: '分类名称'
	                }, {
	                	title: '操作',
	                	width: 120,
	                	align: 'center'
	                }],
	                datas:[]
				}
			}
		},
		computed: {
			
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				
			},
			goBack() {
				
			},
			/**
			 * 取消表单
			 */
			cancelForm() {
				this.goBack();
			},
			/**
			 * 保存表单
			 */
			saveForm() {
				this.$refs['form1'].validate((valid) => {
					if (valid) {
                    } 
                });
			}
		}
	}
</script>

<style>
	.append-div {
		width: 250px;
		display: inline-flex;
	}
	.append-div .ivu-input {
		border-bottom-right-radius: 0!important;border-top-right-radius: 0!important;
	}
</style>